<template>
  <div class="designer-wrap">
    <!-- 顶部导航 -->
    <header class="designer-header">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item
          v-for="item in menuItems"
          :key="item.index"
          :index="item.index"
        >
          {{ item.label }}
        </el-menu-item>
      </el-menu>

      <div class="header-actions">
        <el-button type="primary" @click="publish">
          <el-icon><Upload /></el-icon>
          发布流程
        </el-button>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="designer-content">
      <component
        :is="currentComponent"
        :navable="navable"
        :readable="readable"
        :list="formData"
      />

      <el-dialog
        v-model="dialogTableVisible"
        title="流程信息"
        width="600px"
        destroy-on-close
      >
        <pre class="dialog-content">{{ nodeData }}</pre>
      </el-dialog>
    </main>
  </div>
</template>

<script setup name="FlowDesign">
import { ref, computed } from "vue";
import { useStore } from "vuex";
import { Upload } from "@element-plus/icons-vue";
import { getStartNode } from "../../utils/nodeUtil";
import { getFlowTemplate, addFlowTemplate } from "../../api/flow";
import formDesigner from "./FlowForm/FormIndex.vue";
import BasicInfo from "./BasicInfo/index.vue";
import FlowNode from "./FlowNode/index.vue";
import FlowSetting from "./FlowSetting/index.vue";
// 菜单配置
const menuItems = [
  { index: "1", label: "流程配置" },
  { index: "2", label: "流程表单" },
  { index: "3", label: "流程设计" },
  // { index: '4', label: '流程配置' }
];

// 状态管理
const store = useStore();
const activeIndex = ref("1");
const dialogTableVisible = ref(false);

// Props定义
const props = defineProps({
  node: {
    type: Object,
    default: () => getStartNode(),
  },
  navable: Boolean,
  readable: Boolean,
});

// 计算属性
const nodeData = computed(() => store.state.process.node);
const formData = computed(() => store.state.process.formData);
const baseSetting = computed(() => store.state.process.baseSetting);

// 当前显示的组件
const currentComponent = computed(() => {
  const components = {
    1: BasicInfo,
    2: formDesigner,
    3: FlowNode,
    // '4': FlowSetting
  };
  return components[activeIndex.value];
});

// 方法定义
const handleSelect = (key) => {
  activeIndex.value = key;
};

const publish = () => {
  const data = {
    name: baseSetting.value.flowName,
    remark: baseSetting.value.description,
    imgUrl: baseSetting.value.imageUrl,
    groupId: baseSetting.value.flowGroup,
    nodeData: JSON.stringify(nodeData.value),
    baseSetting: JSON.stringify(baseSetting.value),
    formData: JSON.stringify(formData.value),
  };
  console.log("提交数据:", data);
};

// 初始化数据
const initData = async () => {
  try {
    const res = await getFlowTemplate();
    if (res.code === "0") {
      store.dispatch("process/loadDesign", res.data);
    }
  } catch (error) {
    console.error("初始化数据失败:", error);
  }
};
initData();
</script>

<style lang="scss" scoped>
.designer-wrap {
  @apply w-full h-screen bg-gray-50 flex flex-col overflow-hidden;
}

.designer-header {
  @apply bg-white shadow-sm flex items-center justify-between px-6 z-10;

  .el-menu {
    @apply flex-1 border-none flex justify-center bg-transparent;

    .el-menu-item {
      @apply h-14 leading-[56px] text-[15px] text-gray-600 px-8 transition-all relative;

      &:hover {
        @apply text-primary bg-primary-50;
      }

      &.is-active {
        @apply text-primary font-medium bg-primary-50;

        &::after {
          @apply content-[''] absolute left-1/2 bottom-0 w-6 h-[3px] bg-primary rounded transform -translate-x-1/2;
        }
      }
    }
  }

  .header-actions {
    .el-button {
      @apply px-6 text-sm font-medium rounded-lg transition-all flex items-center gap-2;

      &:hover {
        @apply transform -translate-y-px shadow-primary;
      }

      .el-icon {
        @apply text-base;
      }
    }
  }
}

.designer-content {
  @apply flex-1 overflow-hidden relative p-6 min-h-0;

  > * {
    @apply h-full animate-fadeIn;
  }
}

.dialog-content {
  @apply p-4 bg-gray-50 rounded-lg text-sm font-mono whitespace-pre-wrap;
}

@keyframes fadeIn {
  from {
    @apply opacity-0 translate-y-2;
  }
  to {
    @apply opacity-100 translate-y-0;
  }
}

// 响应式
@screen sm {
  .designer-header {
    @apply px-4;

    .el-menu-item {
      @apply px-5 text-sm;
    }

    .header-actions .el-button {
      @apply px-4 text-xs;
    }
  }

  .designer-content {
    @apply p-4;
  }
}
</style>


